import { useRequest } from 'ahooks';
import { useState, useEffect } from 'react';
import { Skeleton } from 'antd';

import {
  IMAGE,
  FEEDBACK
} from '../../../../constants/api-constants';
import styles from './feedback.module.less';

const Feedback = ({
  mergeUuid
}: {
  mergeUuid: string | undefined
}) => {
  const [epilog, setEpilog] = useState('');
  const [title, setTitle] = useState('');
  const [description, setDescription] = useState('');
  const [physicalResult, setPhysicalResult] = useState('');
  const [mentalAnxiety, setMentalAnxiety] = useState('');
  const [mentalDepression, setMentalDepression] = useState('');
  const [mentalParanoid, setMentalParanoid] = useState('');
  const [mentalPsychotic, setMentalPsychotic] = useState('');
  const [mentalWellBeing, setMentalWellBeing] = useState('');
  const [stressWorkLoad, setStressWorkLoad] = useState('');
  const [stressCompany, setStressCompany] = useState('');
  const [stressLeaderShip, setStressLeaderShip] = useState('');
  const [stressColleagues, setStressColleagues] = useState('');
  const [stressCustomers, setStressCustomers] = useState('');
  const [stressFamily, setStressFamily] = useState('');
  const [solutionResult, setSolutionResult] = useState('');

  const [concludedImage, setConcludedImage] = useState('');
  const [physicalImage, setPhysicalImage] = useState('');
  const [mentalImage, setMentalImage] = useState('');
  const [stressImage, setStressImage] = useState('');
  const [solutionImage, setSolutionImage] = useState('');
  const {
    run: init,
    loading
  } = useRequest(() => ({
    url: FEEDBACK,
    params: {
      mergeUuid,
    }
  }), {
    manual: true,
    onSuccess: (res) => {
      const { data } = res;
      const {
        epilog: epilogValue,
        title: titleValue,
        description: descriptionValue,
        physicalResult: physicalResultValue,
        mentalAnxiety: mentalAnxietyValue,
        mentalDepression: mentalDepressionValue,
        mentalParanoid: mentalParanoidValue,
        mentalPsychotic: mentalPsychoticValue,
        mentalWellBeing: mentalWellBeingValue,
        stressWorkLoad: stressWorkLoadValue,
        stressCompany: stressCompanyValue,
        stressLeaderShip: stressLeaderShipValue,
        stressColleagues: stressColleaguesValue,
        stressCustomers: stressCustomersValue,
        stressFamily: stressFamilyValue,
        solutionResult: solutionResultValue,

        concludedImage: concludedImageUrl,
        physicalImage: physicalImageUrl,
        mentalImage: mentalImageUrl,
        stressImage: stressImageUrl,
        solutionImage: solutionImageUrl
      } = data;

      setEpilog(epilogValue);
      setTitle(titleValue);
      setDescription(descriptionValue);
      setPhysicalResult(physicalResultValue);
      setMentalAnxiety(mentalAnxietyValue);
      setMentalDepression(mentalDepressionValue);
      setMentalParanoid(mentalParanoidValue);
      setMentalPsychotic(mentalPsychoticValue);
      setMentalWellBeing(mentalWellBeingValue);
      setStressWorkLoad(stressWorkLoadValue);
      setStressCompany(stressCompanyValue);
      setStressLeaderShip(stressLeaderShipValue);
      setStressColleagues(stressColleaguesValue);
      setStressCustomers(stressCustomersValue);
      setStressFamily(stressFamilyValue);
      setSolutionResult(solutionResultValue);

      setConcludedImage(concludedImageUrl);
      setPhysicalImage(physicalImageUrl);
      setMentalImage(mentalImageUrl);
      setStressImage(stressImageUrl);
      setSolutionImage(solutionImageUrl);
    }
  });

  useEffect(() => {
    init();
  }, []);

  if (!mergeUuid) return <Skeleton />;
  if (loading) return <Skeleton />;

  return (
    <div className={styles['feedback-box']}>
      <img src="/questionnaire/1.jpg" alt="" />
      <h1 className={styles['h1-title']}>{title}</h1>
      <h2 className={styles['h2-title']}>一、总体状态</h2>
      <div className={styles.content}>
        该问卷旨在帮助您了解自己近一个月的职业心理状况，
        唤醒您主动关注自身心理状况的意识，促进您在未来的生活和工作中遇到困难和压力时，主动进行调整，更积极地应对，实现个人成长。
      </div>
      <img src={`${IMAGE}/?filename=${concludedImage}`} alt="concludedImage" />
      <div className={styles.content}>
        {description}
      </div>
      <h2 className={styles['h2-title']}>二、问卷解读</h2>
      <div className={styles.content}>
        世界卫生组织（WHO）认为：健康是人的身体、心理、社会关系及道德的完美结合。
        其中，心理起到了承上启下的作用。一个心理健康水平良好的人，身心状态平衡，能恰当地释放情绪；
        具有比较积极的心理品质，自信乐观、耐挫力强、对未来充满希望；
        能够较好地适应社会、融入群体。此外，面对工作和生活压力能够积极有效地应对，拥有家人、朋友、同事等社会支持系统。
      </div>
      <div className={styles.content}>
        本职业心理健康状况调查共62个自我评定项目，包括身体健康、心理健康、压力来源及应对方式四个维度。
        研究发现，这四个维度均会对心理健康状态产生影响，且四个维度状态密切相关。
      </div>
      <h2 className={styles['h2-title']}>三、身体健康维度</h2>
      <img src={`${IMAGE}/?filename=${physicalImage}`} alt="physicalImage" />
      <div className={styles.content}>
        {physicalResult}
      </div>
      <h2 className={styles['h2-title']}>四、心理健康维度</h2>
      <img src={`${IMAGE}/?filename=${mentalImage}`} alt="mentalImage" />
      <h3 className={styles['h3-title']}>1、焦虑</h3>
      <div className={styles.content}>
        {mentalAnxiety}
      </div>
      <h3 className={styles['h3-title']}>2、抑郁</h3>
      <div className={styles.content}>
        {mentalDepression}
      </div>
      <img src="/questionnaire/2.jpg" alt="" />
      <h3 className={styles['h3-title']}>3、偏执</h3>
      <div className={styles.content}>
        {mentalParanoid}
      </div>
      <h3 className={styles['h3-title']}>4、精神病性</h3>
      <div className={styles.content}>
        {mentalPsychotic}
      </div>
      <img src="/questionnaire/3.jpg" alt="" />
      <h3 className={styles['h3-title']}>5、主观幸福感</h3>
      <div className={styles.content}>
        {mentalWellBeing}
      </div>
      <h2 className={styles['h2-title']}>五、压力来源维度</h2>
      <img src={`${IMAGE}/?filename=${stressImage}`} alt="stressImage" />
      <h3 className={styles['h3-title']}>1、工作负荷</h3>
      <div className={styles.content}>
        {stressWorkLoad}
      </div>
      <img src="/questionnaire/4.jpg" alt="" />
      <h3 className={styles['h3-title']}>2、公司管理</h3>
      <div className={styles.content}>
        {stressCompany}
      </div>
      <h3 className={styles['h3-title']}>3、与领导关系</h3>
      <div className={styles.content}>
        {stressLeaderShip}
      </div>
      <img src="/questionnaire/5.jpg" alt="" />
      <h3 className={styles['h3-title']}>4、与同事关系</h3>
      <div className={styles.content}>
        {stressColleagues}
      </div>
      <h3 className={styles['h3-title']}>5、与客户关系</h3>
      <div className={styles.content}>
        {stressCustomers}
      </div>
      <img src="/questionnaire/6.jpg" alt="" />
      <h3 className={styles['h3-title']}>6、与家庭关系</h3>
      <div className={styles.content}>
        {stressFamily}
      </div>
      <img src="/questionnaire/7.jpg" alt="" />
      <h2 className={styles['h2-title']}>六、应对方式维度</h2>
      <img src={`${IMAGE}/?filename=${solutionImage}`} alt="solutionImage" />
      <div className={styles.content}>
        {solutionResult}
      </div>
      <h2 className={styles['h2-title']}>七、结束语</h2>
      <div className={styles.content}>
        {epilog}
      </div>
      <img src="/questionnaire/8.jpg" alt="" />
    </div>
  );
};

export default Feedback;
